<template>
	<div class="home" v-if="tabs.length">
		<div class="header">
			<a href="" class="btn"><img src="../assets/logo.png" width="29" alt=""></a>
			
			<router-link  to="/search/list"><input type="text"></router-link>
			<a href="" class="btn">
				<span 
				style="font-size: 10px;"
				v-if="$store.state.user.userInfo.name">
					{{$store.state.user.userInfo.name}}
				</span>
				<img 
				v-else
				src="../assets/user.png" alt="" width="22"></a>
		</div>
		<div class="sub-header">
			<div class="up">
				<!-- 单击就改变了current，当current和当前遍历的下标一致，才高亮 -->
				<span class="item" @click="current = index" :class="{'active':current===index}"
					v-for="(item,index) in tabs" :key="index">{{item.name}}</span>
			</div>
		</div>
		<div class="page">
			<!-- 有多少个tab项，就有多少个page-com -->
			<page-com v-for="(item,index) in tabs" :item="item" :key="item.page_id" v-show="current==index"></page-com>
		</div>

	</div>
	<!-- 使用骨架屏 -->
	<PageSkeleton v-else></PageSkeleton>
</template>
<style scoped="scoped" lang="scss">
	
	.active {
		color: #f70;
	}

	// rem是 浏览器显示的尺寸*2 /100
	// 默认视图宽约定为 720 /2 = 360
	.header {
		height: .84rem;
		background-color: #f0f0f0;
		display: flex;
		align-items: center;

		.btn {
			line-height: .84rem;
			width: .84rem;
			text-align: center;
			vertical-align: center;
		}

		input {
			flex: 1;
			height: .6rem;
			background-color: #fff;
			border: none;
		}
	}

	.sub-header {
		height: .84rem;
		background-color: #f0f0f0;

		.up {
			white-space: nowrap;
			line-height: .88rem;
			font-size: .28rem;
			color: #777;

			.item {
				display: inline-block;
				padding: 0 .3rem;
			}
		}
	}
</style>
<script>
	// 导入组件
	import PageCom from '@/components/PageCom.vue'
	// 骨架屏的组件
	import PageSkeleton from '@/components/PageSkeleton.vue'
	// 导入接口
	import {
		GetHomePage,GetIt
	} from '@/api/home.js';
	export default {
		// 注册组件
		components: {
			PageCom ,PageSkeleton
		},
		data() {
			return {
				// 顶部导航数据
				tabs: [],
				current: 0, //高亮的元素
			}
		},
		created() {
			GetHomePage({client_id:180100031051,page_type:"home"})
				.then(res => {
					console.log("请求好的数据", res.data);
					// 更新tabs数据
					this.tabs = res.data.data.tabs;
				})
				.catch(err => {
					console.log(err);
					this.$notify.danger("请求失败");
				})
			GetIt()
			.then(res=>{
				console.log(res.data);
			})
			.catch(err=>console.log(err))
		},
		beforeDestroy(){
			console.log("组件将要被卸载","home");
		},
		deactivated(){
			console.log("组件失去焦点，后台运行","home");
		}
	}
</script>
